<template>
	<!--图表卡样式 start -->
	<md-dialog :md-active.sync="isShowDialog">
		<md-dialog-title>{{getLangText(label.cardStyle)}}</md-dialog-title>
		<md-tabs>
			<md-tab
				:md-label="getLangText(label.card)"
				style="width:800px;height:500px;overflow-x:hidden;overflow-y:auto;"
			>
				<item-style
					:lang-type="langType"
					:option="cardStyle.card"
					@item-style-result="onCard"
					:item-name="getLangText(label.card)"
					:show-item="true"
				></item-style>
			</md-tab>
			<md-tab
				:md-label="getLangText(label.title)"
				style="width:80px;height:500px;overflow-x:hidden;overflow-y:auto;"
			>
				<item-style
					:lang-type="langType"
					:option="cardStyle.title"
					@item-style-result="onTitle"
					:item-name="getLangText(label.title)"
					:show-item="true"
				></item-style>
				<div class="table-row-item">
					<span>{{getLangText(label.fontColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:cardStyle.title.fontColor}"
							@click="showColorPicker('fontColor')"
						></span>
						{{cardStyle.title.fontColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="cardStyle.title.fontColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='fontColor'"
				></color-picker>
				<md-field>
					<label>{{getLangText(label.fontSize)}}</label>
					<md-input v-model.number="cardStyle.title.fontSize"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.textAlign)}}</label>
					<md-select v-model="cardStyle.title.textAlign">
						<md-option :value="item.en" :key="item.en" v-for="item in textAlign">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>{{getLangText(label.fontWeight)}}</label>
					<md-select v-model="cardStyle.title.fontWeight">
						<md-option :value="item.en" :key="item.en" v-for="item in fontWeight">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
			</md-tab>
			<md-tab
				:md-label="getLangText(label.content)"
				style="width:80px;height:500px;overflow-x:hidden;overflow-y:auto;"
			>
				<item-style
					:lang-type="langType"
					:option="cardStyle.content"
					@item-style-result="onContent"
					:item-name="getLangText(label.content)"
					:show-item="true"
				></item-style>
			</md-tab>
		</md-tabs>

		<md-dialog-actions>
			<md-button class="md-primary md-raised" @click="closeDialog">{{getLangText(label.no)}}</md-button>
			<md-button class="md-accent md-raised" @click="doCardStyle">{{getLangText(label.ok)}}</md-button>
		</md-dialog-actions>
	</md-dialog>
	<!--图表卡样式 end -->
</template>
<script>
	import ItemStyle from "@/components/comp/ItemStyle";
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "CardStyleDialog",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			isShow: {
				type: Boolean,
				default: false
			}
		},
		components: {
			"item-style": ItemStyle,
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				cardStyle: { zh: "卡片样式设置", en: "cardStyle" },
				title: { zh: "标题", en: "title" },
				content: { zh: "内容", en: "content" },
				card: { zh: "卡片", en: "card" },
				ok: { zh: "确定", en: "OK" },
				no: { zh: "取消", en: "cancel" },
				fontSize: { zh: "字体大小", en: "fontSize" },
				fontColor: { zh: "字体颜色", en: "fontColor" },
				fontWeight: { zh: "字体粗细", en: "fontWeight" },
				textAlign: { zh: "文字对齐", en: "textAlign" }
			},
			cardStyle: {
				card: {
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					borderWidth: "0px",
					shadowBlur: "",
					shadowColor: "",
					shadowOffsetX: "0px",
					shadowOffsetY: "0px",
					opacity: 1,
					borderRadius: "0px"
				},
				title: {
					fontColor: "#000",
					fontSize: "20px",
					fontWeight: "normal",
					textAlign: "center",
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					borderWidth: "0px",
					shadowBlur: "",
					shadowColor: "",
					shadowOffsetX: "0px",
					shadowOffsetY: "0px",
					opacity: 1,
					borderRadius: "0px"
				},
				content: {
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					borderWidth: "0px",
					shadowBlur: "",
					shadowColor: "",
					shadowOffsetX: "0px",
					shadowOffsetY: "0px",
					opacity: 1,
					borderRadius: "0px"
				}
			},

			//对齐
			textAlign: [
				{ zh: "左对齐", en: "left" },
				{ zh: "右对齐", en: "right" },
				{ zh: "居中", en: "center" }
			],
			//字体粗
			fontWeight: [
				{ zh: "粗体", en: "bold" },
				{ zh: "浑厚", en: "bolder" },
				{ zh: "正常", en: "normal" },
				{ zh: "轻细", en: "lighter" }
			],
			picker: {
				show: false,
				current: "fontColor"
			},
			isShowDialog: false
		}),
		watch: {
			
			isShow() {
				if (this.isShow) {
					this.parseObj();
					this.isShowDialog = true;
					this.app.$emit("item-style-parse");
				} else {
					this.isShowDialog = false;
					this.$emit("update:isShow", false);
				}
			},
			isShowDialog() {
				this.$emit("update:isShow", this.isShowDialog);
			}
		},

		methods: {
			showColorPicker(tag) {
				this.picker.show = this.picker.show ? false : true;
			},
			onColorPicker(op) {
				this.cardStyle.title.fontColor = op.rgba;
			},
			onCard(op) {
				this.cardStyle.card = op;
			},
			onTitle(op) {
				this.cardStyle.title = op;
			},
			onContent(op) {
				this.cardStyle.content = op;
			},
			closeDialog() {
				this.$emit("update:isShow", false);
			},
			doCardStyle() {
				this.$emit("dialog-ok",JSON.parse(JSON.stringify(this.cardStyle)));
				this.$emit("update:isShow", false);
			},
			parseObj() {
				if (this.option&&JSON.stringify(this.option)!=JSON.stringify({card:{},title:{},content:{}}) ) {
					if(this.option.card&&JSON.stringify(this.option.card)!='{}'){
						for (var key in this.option.card) {
							this.cardStyle.card[key] = this.option.card[key];
						}
					}else{
						this.cardStyle.card={
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					borderWidth: "0px",
					shadowBlur: "",
					shadowColor: "",
					shadowOffsetX: "0px",
					shadowOffsetY: "0px",
					opacity: 1,
					borderRadius: "0px"
				};
					}

					if(this.option.content&&JSON.stringify(this.option.content)!='{}'){
						for (var key in this.option.content) {
							this.cardStyle.content[key] = this.option.content[key];
						}
					}else{
						this.cardStyle.content={
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					borderWidth: "0px",
					shadowBlur: "",
					shadowColor: "",
					shadowOffsetX: "0px",
					shadowOffsetY: "0px",
					opacity: 1,
					borderRadius: "0px"
				};

					}
					
					if (this.option.title&&JSON.stringify(this.option.title)!='{}') {
						for (var key in this.option.title) {
							this.cardStyle.title[key] = this.option.title[key];
						}
					}else{
						this.cardStyle.title={
					fontColor: "#000",
					fontSize: "20px",
					fontWeight: "normal",
					textAlign: "center",
					color: "transparent",
					borderColor: "#000",
					borderType: "solid",
					borderWidth: "0px",
					shadowBlur: "",
					shadowColor: "",
					shadowOffsetX: "0px",
					shadowOffsetY: "0px",
					opacity: 1,
					borderRadius: "0px"
				};
					}
				
				}
			}
		},
		mounted() {}
	};
</script>

